<template>
    <div class="user">
        <div class="postMaMa">
            <el-table
                    size="small"
                    stripe
                    border
                    :data="userLinkList"
                    style="width: 70%">
                <el-table-column
                        prop="data"
                        label="原网址"
                        width="450">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="短链接"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="访问次数"
                        width="150">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="265">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="flag=true,showQrcode(scope.row)">展示二维码
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div>
            <el-pagination
                    :current-page="page.current"
                    :page-size="page.size"
                    layout="total,prev,pager,next,jumper"
                    :total="page.total"
                    @current-change="pagechange"
            >
            </el-pagination>
<!--        </div>-->
<!--        <el-button type="primary" @click="exportsx">点我导出您的所有链接（xlsx）</el-button>-->
<!--        <div>-->
            <el-dialog :before-close="close" :close-on-click-modal="true" :title=this.show.id :visible="flag"
                       style="width: 600px;margin-left: 700px;margin-top: 100px">
                <vue-qr :text="this.show.path" :size="250" :logoSrc="logoSrc" colorDark="#4169E1" colorLight="#fff"></vue-qr>
            </el-dialog>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'User',
        data() {
            return {
                logoSrc: require('../../img/logo.jpg'),
                page: {
                    size: 0,
                    current: 1,
                    total: 0,
                },
                flag: false,
                show: {
                    id: '',
                    path: '',
                },
                user: {
                    name: '',
                    id: '',
                },
                userLinkList: [],
            }
        },
        methods: {
            // exportsx(){
            //     this.id= window.sessionStorage.getItem("id")
            //     window.open('http://www.xhxlcloud.com:8080/link/user/xlsx?id='+this.id)
            // },
            close() {
                this.flag = false
            },
            showQrcode(data) {
                this.show.id = data.id;
                this.show.path = "http://45q6c23894.qicp.vip/find/" + data.id;
            },

            init(){
                this.getRequest('/link/user').then(resp => {
                    this.userLinkList=resp;


                })
            },

            pagechange(val){
                this.page.current=val
            },

            handleDelete(data) {
                //这个data,name不用要
                this.$confirm('此操作将永久删除该[' + data.id + ']数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.postRequest('/link/delete?id=' + data.id).then(resp => {
                        if (resp.message) {
                            this.init();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },

        mounted() {
            this.init();
        }
    }
</script>

<style scoped>


    .addPosInput {
        width: 300px;
        margin-right: 8px;
    }

    .postMaMa {
        margin-top: 10px;
    }

    .updatePosInput {
        width: 280px;
        margin-left: 8px;
    }
</style>